<template>
	<view class="market_index">
		<view class="header">
			<view class="header_main">
				<view class="header_item" v-for="(item, index) in tabs" :key="index" @click="tab = item.id">
					<view class="title">{{ item.name }}</view>
					<view class="line" :class="{ active: item.id === tab }"></view>
				</view>
			</view>
		</view>

		<view class="selection">
			<view class="filter">
				<view class="switch">
					<view class="slider" :class="[selection.currency === 1 ? 'left' : 'right']"></view>
					<view class="text">
						<view :class="{ active: selection.currency === 1 }" @click="selection.currency = 1">人民币</view>
						<view :class="{ active: selection.currency === 2 }" @click="selection.currency = 2">元气</view>
					</view>
				</view>
				<view class="sort">
					<view class="item" @click="changeSort('price')">
						价格
						<view class="triangle" :class="{ desc: !selection.price }"></view>
					</view>
					<view class="item" @click="changeSort('time')">
						时间
						<view class="triangle" :class="{ desc: !selection.time }"></view>
					</view>
				</view>
			</view>
			<view class="search">
				<uni-search-bar
					v-model="selection.search"
					placeholder="藏品搜索"
					cancelButton="none"
					bgColor="#EEEEEE"
					textColor="black"
					:radius="20"
					@clear="clearSearch"
					@confirm="search"
				>
					<template v-slot:searchIcon>
						<uni-icons color="#999999" size="18" type="search" />
					</template>
				</uni-search-bar>
			</view>
		</view>

		<swiper class="swiper" :current="swiper" :circular="false" :indicator-dots="false" :autoplay="false" :disable-touch="true">
			<swiper-item class="swiper-item">
				<Collection :selection="selection" />
			</swiper-item>
			<swiper-item class="swiper-item">
				<Consignment :selection="selection" />
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import Collection from "./components/collection.vue";
import Consignment from "./components/consignment.vue";

export default {
	components: {
		Collection,
		Consignment,
	},
	data() {
		return {
			tabs: [
				{
					name: "藏品系列",
					id: 1,
				},
				{
					name: "藏品寄售",
					id: 2,
				},
			],
			tab: 1,
			currency: 1,

			selection: {
				currency: 1,
				price: true,
				time: true,
				search: "",
			},
		};
	},

	computed: {
		swiper() {
			return this.tab - 1;
		},
	},

	methods: {
		changeSort(type) {
			this.selection[type] = !this.selection[type];
		},

		clearSearch() {
			this.selection.search = "";

			this.search();
		},

		search() {
			// todo
		},
	},
};
</script>
<style lang="scss" scoped>
.market_index {
	width: 100vw;
	height: 100vh;
	padding: 0 40rpx;
	padding-top: var(--status-bar-height);

	.header {
		width: 100%;
		height: 88rpx;
		margin-top: 20rpx;

		.header_main {
			width: 60%;
			height: 100%;
			margin: 0 auto;

			display: flex;
			justify-content: space-between;
			align-content: flex-end;

			.header_item {
				height: 66rpx;
				width: 144rpx;

				color: black;

				margin: auto;

				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex-direction: column;

				.title {
					font-weight: 500;
					font-size: 36rpx;
					text-align: center;
				}

				.line {
					width: 40rpx;
					height: 8rpx;
					background-color: white;
					border-radius: 4rpx;

					&.active {
						background-color: #2359f8;
					}
				}
			}
		}
	}

	.selection {
		width: 100%;
		height: 134rpx;
		margin-top: 20rpx;

		.filter {
			height: 50rpx;
			width: 100%;

			display: flex;
			justify-content: space-between;
			align-items: center;

			.switch {
				width: 216rpx;
				height: 50rpx;
				background-color: #eeeeee;
				border-radius: 26rpx;
				position: relative;
				overflow: hidden;

				.slider {
					width: 50%;
					height: 100%;
					background-color: #2359f8;
					box-shadow: 0px 2rpx 8rpx 0px #00000066;
					border-radius: 26rpx;

					&.left {
						transform: translateX(0);
					}

					&.right {
						transform: translateX(100%);
					}

					transition: transform 0.3s ease;
				}

				.text {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;

					font-size: 24rpx;
					text-align: center;

					display: flex;
					justify-content: space-around;
					align-items: center;

					view {
						flex: 1;
						font-weight: bold;

						color: #999999;

						&.active {
							color: white;
						}
					}
				}
			}

			.sort {
				width: 166rpx;
				height: 34rpx;

				display: flex;
				justify-content: flex-start;
				align-items: center;

				.item {
					height: 100%;
					width: 68rpx;

					font-size: 24rpx;
					color: black;
					font-weight: bold;

					display: flex;
					justify-content: center;
					align-items: center;

					& + .item {
						margin-left: 30rpx;
					}

					.triangle {
						width: 13rpx;
						height: 80%;
						margin-left: 6rpx;
						position: relative;

						&::before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							border-left: 10rpx solid transparent; /* 左边框 */
							border-right: 10rpx solid transparent; /* 右边框 */
							border-bottom: 12rpx solid #000000; /* 上三角形的底边框，颜色为蓝色 */
							transform: scale(0.8);
						}

						&::after {
							content: "";
							position: absolute;
							bottom: 0;
							left: 0;
							border-left: 10rpx solid transparent; /* 左边框 */
							border-right: 10rpx solid transparent; /* 右边框 */
							border-top: 12rpx solid #cccccc;
							transform: scale(0.8);
						}

						&.desc {
							&::before {
								border-bottom: 12rpx solid #cccccc; /* 上三角形的底边框，颜色为蓝色 */
							}

							&::after {
								border-top: 12rpx solid #000000;
							}
						}
					}
				}
			}
		}

		.search {
			width: 100%;
			height: 64rpx;

			.uni-searchbar {
				padding: 0;
				margin-top: 20rpx;

				::v-deep .uni-searchbar__text-placeholder {
					color: #999999;
				}
			}
		}
	}

	.swiper {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 20rpx - 88rpx - 134rpx - 20rpx - 20rpx - 2rpx);
		margin-top: 20rpx;

		.swiper-item {
			width: 100%;
			height: 100%;
			// background-color: black;
			color: white;
		}
	}
}
</style>
